window.addEventListener(`load`, function () {
    new Swiper('.swiper', {
        // direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },




    })
    // 数据数组,开发者栏
    let serve = [{
        Image: `./images/service01.svg`,
        title: `API私有化服务`,
        info: `可部署本地&专有云的Web API`,
    }, {
        Image: `./images/service02.svg`,
        title: `源码云监测`,
        info: `实时代码托管、威胁情报监控`,
    }, {
        Image: `./images/service03.svg`,
        title: `源码有赢`,
        info: `一站式营销活动服务平台`,
    }, {
        Image: `./images/service04.svg`,
        title: `YuanMa API`,
        info: `API开发者协作平台`,
    }]
    // 遍历数组，获取数据
    serve.forEach(function (v) {
        // 获取数据宣染到页面
        document.querySelector(`#serve`).innerHTML += ` <li>
<img src="${v.Image}" alt="">
<h1>${v.title}</h1>
<p class="font14">${v.info}</p>
<a class="font14" href="">去搜索</a>

</li>`
    })
    // 海量的API服务，丰富的API分类
    //写入固定数据
    let cloud_services = [{
        ImageUrl: `./images/api01.svg`,
        title: `生活服务`,

    }, {
        ImageUrl: `./images/api02.svg`,
        title: `金融科技`,

    }, {
        ImageUrl: `./images/api03.svg`,
        title: `交通地理`,

    }, {
        ImageUrl: `./images/api04.svg`,
        title: `充值缴费`,

    }, {
        ImageUrl: `./images/api05.svg`,
        title: `数据智能`,

    }, {
        ImageUrl: `./images/api06.svg`,
        title: `企业工商`,

    }, {
        ImageUrl: `./images/api07.svg`,
        title: `应用开发`,

    }, {
        ImageUrl: `./images/api08.svg`,
        title: `电子商务`,

    }, {
        ImageUrl: `./images/api09.svg`,
        title: `吃喝玩乐`,

    }, {
        ImageUrl: `./images/api10.svg`,
        title: `文娱视频`,

    },]
    // 遍历数组，并渲染
    //定义空数组保存数据
    let str = ``
    cloud_services.forEach(function (v) {
        //添加数据进空字符串
        str +=
            `<li>
        <img src="${v.ImageUrl}" alt="">
        <h1>${v.title}</h1>
        </li>`


    })
    //写入html文档
    gitEle(`#cloud-services`).innerHTML = str
    let oldImg = ''
    // 交互效果鼠标移入移出效果
    let apiDom = gitEleAll(`#cloud-services li`)
    apiDom.forEach(function (v) {
        v.addEventListener('mouseover', function () {
            // li改背景颜色
            this.style.background = "#2f7ee9"
            // 获取li下面的最后一个元素，字体颜色白色
            this.lastElementChild.style.color = "#fff"
            // 获取img的地址字符串
            let imgUrl = this.firstElementChild.src
            // 保存一个新图的地址字符串
            oldImg = imgUrl
            // 拼接字符串成为新图片的地址
            this.firstElementChild.src = imgUrl.substring(0, imgUrl.lastIndexOf('.')) + "-c.svg"
            // 方法二replace
            // this.firstElementChild.src=imgUrl.replace('.svg','-c.svg')

        })
        //移出事件
        v.addEventListener('mouseout', function () {
            //移出时背景颜色为空
            this.style.background = ""
            //移出时字体颜色为空
            this.lastElementChild.style.color = ""
            //移出时img图片地址换新图地址
            this.firstElementChild.src = oldImg
        })
    })
    //获取轮播图的标签
    let AcrCo = gitEleAll('.AcrCo ul')
    //定义下标
    let list = 0
    //第一个轮播图显示
    AcrCo[list].style.display = 'block'
    window.setInterval(function () {
       //当下标为2时，list为-1，-1自加一则下标为0  
       if(list===AcrCo.length-1){
            list=-1
        }
        //下标自增一
       list++ 

        
        //清空所有显示
        for (i = 0; i < AcrCo.length; i++) {
            AcrCo[i].style.display = ''
        }
        //所在下标显示
        AcrCo[list].style.display = 'block'
    }, 2000)
    //返回顶部按钮
    let btn=gitEle('button')
    btn.addEventListener('click',function(){
        window.scrollTo({
            top:0,
            behavior:"smooth",
        });
    
    })
    let jump=gitEleAll('header a')
    jump.forEach(function(v,i){
        v.addEventListener('click',function(){
          
               if(i==0){
                    window.location.href = 'index.html'
            }else if(i==1){
                window.location.href = 'api.html'
            }else if(i==2){
                window.location.href = 'unicorn.html'
            }else if(i==3){
                window.location.href = 'api log-in-1.html'
            }else{
                window.location.href = 'register.html'
            }
  
        })
    })





})





















